import QtQuick 1.0

Rectangle {
    id: button
    color: "#00000000"

    property alias buttonWidth: button.width
    property alias buttonText: buttonText.text
    signal activated

    height: 50

    BorderImage {
        id: buttonBorder
        source: "../images/Button_default.png"
        anchors.fill: parent
        width: parent.width; height: parent.height
        border.left: 20; border.top: 20
        border.right: 20; border.bottom: 20
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Stretch
    }

    Text {
        id: buttonText
        anchors.fill: parent
        font.family: nokiaStandard.name
        font.pixelSize: 22
        color: "#000000"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        elide: Text.ElideRight
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //parent.color = "red"
            //mainContainer.state = "shoppingListState"
            parent.activated()
        }
        onPressed: {
            buttonBorder.source = "../images/Button_active2.png";
            buttonText.color = "#FFFFFF"
        }
        onReleased: {
            buttonBorder.source = "../images/Button_default.png";
            buttonText.color = "#000000"
        }

    }

    states: [
        State {
            name: "hasFocus"; when: footerButton.focus;
            PropertyChanges { target: footerButton; color: "#E6B6D051" }
        }
    ]
}
